<template>
	<div class="shopcar-container">
		<div class="goods-list">
			<!-- 商品列表 -->
			<div class="mui-card" v-for="(item, i) in goodslist" :key="item.id">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<mt-switch
							v-model="$store.getters.getGoodsSelected[item.id]"
							@change="seletedChanged(item.id, $store.getters.getGoodsSelected[item.id])"
						></mt-switch>
						<img :src="item.thumb_path" alt="" />
						<div class="info">
							<h3>{{ item.title }}</h3>
							<p>
								<span class="price">{{ item.sell_price }}</span>
								<numbox :initcount="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numbox>
								<!-- 如何从购物车中获取商品的数量 -->
								<!-- 我们创建一个空对象，然后循环购物车中所有商品的数据，把当前这条商品的Id，作为对象的属性名，count值作为对象的属性值，这样，当把所有商品循环一遍，就会得到一个对象 {88:1,89:3}-->
								<!-- //item.id是用来删除store中的数据，i用来删除goodslist里的值 -->
								<a href="#" @click.prevent="remove(item.id, i)">删除</a>
							</p>
						</div>
					</div>
				</div>
			</div>
			<!-- 结算区域 -->
			<div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner settlement">
						<div class="left">
							<p>总计(不含运费)</p>
							<p>
								已勾选商品<span class="red">{{ $store.getters.getGoodsCountAmount.count }}</span
								>件，总价<span class="red">￥{{ $store.getters.getGoodsCountAmount.amount }}</span>
							</p>
						</div>
						<mt-button type="danger">去结算</mt-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import numbox from '../subcomponents/shopcar_numbox.vue'
export default {
	data() {
		return {
			goodslist: [], //g=购物车中所有商品
		}
	},
	created() {
		this.getGoodsList()
	},
	methods: {
		getGoodsList() {
			//获取到store中所有商品的id，然后拼接出一个用逗号分隔的字符串
			//获取购物车列表
			var idArr = []
			this.$store.state.car.forEach(item => idArr.push(item.id))
			if (idArr.length <= 0) {
				return
			}
			this.$http.get('api/goods/getshopcarlist/' + idArr.join(',')).then(result => {
				if (result.body.status === 0) {
					this.goodslist = result.body.message
				}
			})
		},
		remove(id, index) {
			this.goodslist.splice(index, 1)
			this.$store.commit('removeFormCar', id)
		},
		seletedChanged(id, val) {
			//每当点击开关，把最新的开关状态，同步到store中
			console.log('开关状态' + val)
			this.$store.commit('updateGoodsSelected', { id, selected: val })
		},
	},
	components: { numbox },
}
</script>
<style lang="scss" scoped>
.shopcar-container {
	background-color: #eee;
	overflow: hidden;
	.goods-list {
		.mui-card-content-inner {
			display: flex;
			align-items: center;
		}
		img {
			width: 60px;
			height: 60px;

			margin: 0px 15px;
		}

		.info {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			h3 {
				font-size: 13px;
			}
			.price {
				color: red;
				font-weight: bold;
			}
			p {
				margin: 10px 0;
			}
		}
	}
	.settlement {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.red {
			color: red;
			font-size: 16px;
			font-weight: bold;
		}
	}
}
</style>
